<template>
	<div>
        
        <div class="heades">
            <van-nav-bar
                class="tops"
                title="分类运输"
                style="background: #fff;"
                left-arrow
                        @click-left="onClickLeft"
                />
        </div>
        <van-overlay show="true"/>
        <div class="cones">
            <img src="@/assets/guanbi.png" class="imgg" @click="onclicks" v-show="ft" >
            <img src="@/assets/yifensort1.png" class="imgy"  v-show="ft">
            <img src="@/assets/renzheng.png" class="imgr"  v-show="ft">
            <img src="@/assets/nolist.png" class="imgn" :id="[ this.ft ? '' : 'ims' ]">
            <p :id="[ this.ft ? '' : 'pps' ]">暂无订单哦～</p>
        </div>
        
  </div>

</template>
<script>
	export default{
		data(){
			return{
			    ft:true
			}
        },
        methods:{
            onclicks(){
                this.ft=false
            }
        }
	}
</script>

<style scoped="scoped">
    .cones{
        width: 100%;
        height: 100%;
        position: relative;
        margin-top: 3.4rem;
    }
    #imgs{
        display: none;
    }
    .cones .imgg{
        width: 20%;
        position: absolute;
        right: 0.9rem;
    }
    .cones .imgy{
        /* width: 48.25rem;
        height: 58.08rem; */
        padding-top: 2.4rem;
        width: 85%;
    }
    .cones .imgr{
        /* width: 31.17rem;
        height: 8.42rem; */
        width: 55%;
        position: absolute;
        top: 20.6rem;
        right: 22%;
    }
    .cones .imgn{
        width: 60%;
        position: absolute;
        top: 20.6rem;
        right: 15%;
        z-index: -1;
    }
    #ims{
        width: 60%;
        position: absolute;
        top: 2rem;
        right: 20%;
    }
    .cones p{
        margin-top: 2.5rem;
    }
    #pps{
        position: absolute;
        top: 8rem;
        right: 36%;
    }
</style>
